<template>
  <div class="func goods-filter-setting">
    <p class="attr">
      排序筛选
    </p>
    <div class="adjust-item">
      <el-checkbox v-model="pageConfigModel.priceFilter">
        积分
      </el-checkbox>
    </div>
    <div class="adjust-item">
      <el-checkbox v-model="pageConfigModel.saleNumFilter">
        销量
      </el-checkbox>
    </div>
    <div class="adjust-item">
      <el-checkbox v-model="pageConfigModel.priceRangeFilter">
        积分筛选
      </el-checkbox>
    </div>
    <div class="adjust-item">
      <el-checkbox v-model="pageConfigModel.cashRangeFilter">
        金额筛选
      </el-checkbox>
    </div>

    <div class="adjust-item">
      <span style="font-size: 14px;width: 78px; text-align: left">文字默认色</span>
      <el-color-picker v-model="pageConfigModel.filterColor" />
      <span>{{ pageConfig.filterColor }}</span>
    </div>

    <div class="adjust-item">
      <span style="font-size: 14px;width: 78px; text-align: left">文字选中色</span>
      <el-color-picker v-model="pageConfigModel.filterSelectedColor" />
      <span>{{ pageConfig.filterSelectedColor }}</span>
    </div>

    <div class="adjust-item">
      <span style="font-size: 14px;width: 78px; text-align: left">背景颜色</span>
      <el-color-picker v-model="pageConfigModel.filterBackgroundColor" />
      <span>{{ pageConfig.filterBackgroundColor }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import {WritableComputedRef} from "vue";
import {
  goodsFilterPageConfig,
  IGoodsFilterPageConfig
} from "@/views/activity/actApp/components/default/operationComponents/goodsFilterSetting/index";

const props = withDefaults(defineProps<{
  pageConfig: IGoodsFilterPageConfig,
}>(), {
  pageConfig: () => ({
    ...goodsFilterPageConfig
  })
})

const emits = defineEmits<{
  (e: "update:page-config", value: IGoodsFilterPageConfig):void;
}>()

const pageConfigModel: WritableComputedRef<IGoodsFilterPageConfig> = computed({
  get() {
    return props.pageConfig
  },
  set(newValue) {
    emits("update:page-config", newValue)
  }
})

</script>

<style scoped lang="scss">
@use "../../styles/operation";
</style>
